<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
    <style>
        .d1 {
            width: 600px;
            height: 400px;
            background-color: #dff5ab;
        }

        img {
            width: 200px;
            background-color: pink;
            float: left;
        }

        .d2 {
            width: 600px;
            height: 400px;
            background-color: #abc4f5;
        }

        /* 选中第一个字符 */
        .d2::first-letter {
            font-size: 80px;
            float: right;
        }

        .outer {
            width: 600px;
            height: 400px;
            background-color: #d7b3b3;
            padding: 10px;
            text-align: center;
        }

        .box {
            font-size: 25px;
            padding: 10px;
        }

        .box1 {
            background-color: #99a52e;
        }

        .box2 {
            background-color: #2ea544;
            float: left;
            /* width: 200px; */
            /* height: 80px; */
            /* margin: 30px; */
        }

        .box3 {
            background-color: #682ea5;
            height: 100px;
            float: left;
        }

        .outer1 {
            width: 600px;
            height: 400px;
            background-color: #b3d7bb;
            padding: 10px;
        }

        .box11 {
            width: 60px;
            height: 60px;
            padding: 5px;
            background-color: skyblue;

        }

        .box111 {
            float: right;
        }
    </style>
</head>

<body>
    <div class="d1">
        <img src="./images/author.png" alt="">
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
    </div>
    <div class="d2">
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
        使用lorem150 生成150个单词的文本内容 Lorem150.... Lorem150....
    </div>
    <div class="outer">
        <div class="box box1">盒子1</div>
        <div class="box box2">盒子2</div>
        <div class="box box3">盒子3</div>
    </div>
    <div class="outer1">
        <div class="box11 box111">盒子1</div>
        <div class="box11 box21">盒子2</div>
        <div class="box11 box31">盒子3</div>
    </div>

</body>

</html>